﻿@{
    ViewBag.Title = "Home Page";
}

<h2>What changed?</h2>
<p>
    This example started from a standard MVC3 project template. What has changed though? It looks almost exactly the same.
</p>
<ol>
    <li>The first I did was update all of the nuget packages. (Shouldn't this always be the first thing you do?)</li>
    <li>Next I added an http handler so that the bundle url's work:
    
        <pre>&lt;httpModules&gt;
    &lt;add name="BundleModule" type="Bundler.BundleModule, Bundler" /&gt;
&lt;/httpModules&gt;</pre>
    
    </li>
    <li>
        In the global.asax I define the bundles in Application_Start:
        <pre>var css = new Bundle("~/css", typeof(CssMinify));
css.AddFile("~/Content/Site.css");
css.AddFile("~/Content/themes/base/jquery-ui.css");
BundleTable.Add(css);

var js = new Bundle("~/js", typeof(JsMinify));
js.AddFile("~/Scripts/jquery-1.8.2.min.js");
js.AddFile("~/Scripts/jquery-ui-1.8.23.min.js");
js.AddFile("~/Scripts/modernizr-2.6.2.js");
BundleTable.Add(js);</pre>

    </li>
    <li>Last thing is updating the CSS and JavaScript references. In the layout page I replaced the CSS reference with:
    
        <pre>@@BundleTable.RenderHtmlFor("~/css")</pre>
        
        and the two JavaScript references with:
        
        <pre>@@BundleTable.RenderHtmlFor("~/js")</pre>
        
        (also added using statement at the top)
        
        <pre>@@using Bundler</pre>
    
    </li>
</ol>
<br/>

<h2>The Result</h2>

<p>When you are in debug mode, there should be no difference. There will be two link tags for the CSS which point to the files specified in the bundle - and the same thing for the javascriot.

<p>When you are not in debug mode, everything will be combined, minified, compressed, and cached. The references to CSS and javascript will only be reduced to one request each.</p>

<p>If your view source on this page you will see the references to the CSS and JavaScript are random numbers:</p>

    <pre>&lt;link href="/704774990" rel="stylesheet" type="text/css" /&gt;
&lt;script src="/1886344613" type="text/javascript"&gt;&lt;/script&gt;</pre>

<p>If you look at the source for each of those files you will see that they are combined and minified.</p>

<p>If you use Firebug, Fiddler, or any other web developer tools you will also see that the requests for those files were also compressed and have the appropriate caching headers set.</p>